<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>距离测量</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="默认样式距离量测" onClick="javascript:startRuler1()"/>
    <input type="button" class="button" value="自定义样式距离量测" onClick="javascript:startRuler2()"/>
</div>
<div id="tip">
    鼠标在地图上点击获取量测点，右键或双击左键结束当前量距操作
</div>
<script type="text/javascript">
    var map, ruler1, ruler2;
    //地图初始化
    map = new AMap.Map("container", {
        resizeEnable: true
    });
    map.plugin(["AMap.RangingTool"], function() {
        ruler1 = new AMap.RangingTool(map);
        AMap.event.addListener(ruler1, "end", function(e) {
            ruler1.turnOff();
        });
        var sMarker = {
            icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                image: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png"
            })
        };
        var eMarker = {
            icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                image: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png"
            }),
            offset: new AMap.Pixel(-9, -31)
        };
        var lOptions = {
            strokeStyle: "solid",
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 2
        };
        var rulerOptions = {startMarkerOptions: sMarker, endMarkerOptions: eMarker, lineOptions: lOptions};
        ruler2 = new AMap.RangingTool(map, rulerOptions);
    });
    //启用默认样式测距
    function startRuler1() {
        ruler2.turnOff();
        ruler1.turnOn();
    }
    //启用自定义样式测距
    function startRuler2() {
        ruler1.turnOff();
        ruler2.turnOn();
    }
</script>
</body>
</html>